<template>
  <div class="flex flex-col h-full">
    <SearchContainer @search="getData" @reset="() => formRef.resetFields()">
      <a-form ref="formRef" class="flex-1 flex" :model="formState" :label-col="{ style: { width: '80px' } }">
        <a-form-item name="menuName" label="">
          <a-input v-model:value="formState.menuName" placeholder="菜单名称" class="!w-56" />
        </a-form-item>
        <a-form-item name="menuStatus" label="状态">
          <a-select v-model:value="formState.menuStatus" class="!w-56" placeholder="请选择">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="1">正常</a-select-option>
            <a-select-option :value="0">停用</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-card :bordered="false" class="mt-2 flex-1" size="small">
      <div class="mb-3 flex justify-between">
        <a-button type="primary" class="ml-2" ghost @click="onExpandAll">
          <component :is="Icon[isExpandAll ? 'CaretDownOutlined' : 'CaretRightOutlined']" /> {{ isExpandAll ? '折叠全部' : '展开全部' }}
        </a-button>
        <div>
          <!-- <BaseExport class="mr-2" type="表头管理" :search-params="formState" file-type="json" /> -->
          <BaseImport url="/common/menu/upload" accept=".json" @success="getData" />
        </div>
      </div>
      <BaseTable
        v-model:expanded-row-keys="expandedRowKeys"
        :columns="columns"
        :loading="loading"
        :data-source="tableData"
        row-key="id"
        bordered
        fill
        :row-class-name="(record) => ({ 'table-disabled-row': record.showStatus === 0 })"
        :indent-size="24"
        :scroll="{ x: 1800 }"
      >
        <template #expandIcon="{ expanded, record, onExpand }">
          <component
            :is="Icon[expanded ? 'CaretDownOutlined' : 'CaretRightOutlined']"
            v-if="record.children?.length"
            class="px-1"
            @click="onExpand(record, $event)"
          />
        </template>
        <template #bodyCell="{ column, record, text }">
          <template v-if="column.dataIndex === 'menuIcon'">
            <component :is="Icon[text]" v-if="text" />
            <span v-else>-</span>
          </template>
          <!-- <template v-if="column.dataIndex === 'menuType'">
            {{ ['模块', '目录', '菜单', '按钮'][text - 1] }}
          </template> -->
          <template v-if="column.dataIndex === 'groupCode' && record.menuType === 1">
            <a-tag v-if="record.groupCode === '1'" color="gold">门诊</a-tag>
            <a-tag v-else-if="record.groupCode === '2'" color="geekblue">住院</a-tag>
            <a-tag v-else-if="record.groupCode === '3'" color="volcano">视光</a-tag>
            <a-tag v-else-if="record.groupCode === '4'" color="cyan">辅助</a-tag>
          </template>
          <template v-if="column.dataIndex === 'menuStatus'">
            <a-tag v-if="text === 1" color="green">启用</a-tag>
            <a-tag v-else color="red">停用</a-tag>
          </template>
          <template v-if="column.dataIndex === 'showStatus'">
            <a-tag v-if="text === 1" color="green">显示</a-tag>
            <a-tag v-else color="red">隐藏</a-tag>
          </template>
        </template>
      </BaseTable>
    </a-card>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import * as Icon from '@ant-design/icons-vue'
import { post } from '@/utils/request'
import SearchContainer from '@/components/SearchContainer'
import BaseTable from '@/components/BaseTable'

const loading = ref(false)
const tableData = ref([])
const formRef = ref(null)
const formState = ref({
  applicationId: '1703963394688258049',
  menuName: '',
  menuStatus: ''
})
const expandedRowKeys = ref([])

const columns = [
  { title: '菜单名称', dataIndex: 'menuName' },
  { title: '图标', dataIndex: 'menuIcon' },
  { title: '顺序号', dataIndex: 'outOrder' },
  { title: '显示状态', dataIndex: 'showStatus' },
  // { title: '菜单类型', dataIndex: 'menuType' },
  // { title: '权限标识', ellipsis: true, dataIndex: 'permissonCode' },
  // { title: '组件路由', dataIndex: 'routeUrl', ellipsis: true },
  { title: '启用状态', dataIndex: 'menuStatus' },
  { title: '模块分组', dataIndex: 'groupCode' },
  { title: '备注', dataIndex: 'memo', ellipsis: true },
  { title: '创建人', dataIndex: 'createUser' },
  { title: '创建时间', dataIndex: 'createTime' }
]

const getData = async () => {
  loading.value = true
  const { code, data } = await post('/common/menu/getSystemMenuList', formState.value)
  loading.value = false
  if (code === 0) {
    tableData.value = data.sort((a, b) => {
      if (a.groupCode !== b.groupCode) return a.groupCode < b.groupCode ? -1 : 1
      else if (a.showStatus !== b.showStatus) return a.showStatus > b.showStatus ? -1 : 1
    })
  }
}
const isExpandAll = ref(false)
const onExpandAll = () => {
  loading.value = true
  if (isExpandAll.value) {
    loading.value = false
    isExpandAll.value = false
    expandedRowKeys.value = []
  } else {
    setTimeout(() => {
      expandedRowKeys.value = getId(tableData.value)
      isExpandAll.value = true
      loading.value = false
    }, 100)
  }
}

//递归获取所有子节点children获取id
const getId = (data) => {
  const ids = []
  data.forEach((item) => {
    ids.push(item.id)
    if (item.children) {
      ids.push(...getId(item.children))
    }
  })
  return ids
}
onMounted(() => {
  getData()
})
</script>
<style lang="less" scoped>
:deep(.table-disabled-row) {
  color: #00000050;
  background-color: #00000005;
}
:deep(.ant-table-row-level-1) {
  .ant-table-cell-with-append {
    ::after {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 999;
      width: 2px;
      height: 102%;
      // border-bottom: 2px solid var(--primary-color);
      border-left: 2px solid var(--primary-color);
      content: '';
    }
  }
}
:deep(.ant-table-row-level-2) {
  .ant-table-cell-with-append {
    ::after {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 999;
      width: 2px;
      height: 102%;
      // border-bottom: 2px solid var(--primary-color);
      border-left: 2px solid red;
      content: '';
    }
  }
}
</style>
